import React, { useState,useEffect} from 'react'
import '@/css/Login.css';
export default function () { 
  const [bBtnSubmitIcon, setbBtnSubmitIcon] = useState(false)
  const [oldPsd, setOldPsw] = useState('')
  const [oldPsdDesc, setOldPswDesc] = useState('')
  const [newPsd, setNewPsd] = useState('')
  const [newPsdDesc, setNewPsdDesc] = useState('')
  const [newAgPsd, setAgNewPsd] = useState('')
  const [newAgPsdDesc, setAgNewPsdDesc] = useState('')
  const btnText = '修改密码'
  //设计模式https://www.jianshu.com/p/966ab8c9a660
  const Validator = function () { 
    this.cache=[]
  }
    Validator.prototype.add = function (val, regName, setSth, successText, failText) { 
        this.cache.push(() => { 
            if (this.strategies[regName](val)) {
                setSth(successText)
                return true
            } else { 
                setSth(failText)
                return false
            }
        })
  }
  Validator.prototype.strategies = {
    "cellphone": function (val) { 
        return /^(0|86|17951)?(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])[0-9]{8}$/.test(val)
      },
    "username": function (val) {
      return /^[a-zA-Z_][a-zA-Z0-9_-]{3,15}$/.test(val)
    },
    "password": function (val) {
      val=val.replace(/\s/g,'')
      return /^[^\u4e00-\u9fa5]{4,16}$/.test(val)
  }
    }
    Validator.prototype.check = function () {
        var arr_result=[]
        this.cache.forEach(function (v, k) { 
            arr_result.push(v())
        })   
        var res=arr_result.every(function (v, k) { 
            return v===true
        })
      return res
    }
    
    const handleSubmit = () => {
      var n = new Validator()
      n.add(oldPsd, 'password', setOldPswDesc, '', '(密码6到18位)')
      n.add(newPsd, 'password', setNewPsdDesc, '', '(密码6到18位)')
      n.add(newAgPsd, 'password', setAgNewPsdDesc, '', '(密码6到18位)')
      if (!n.check()) { return}
      if (newPsd !== newAgPsd) { 
        setAgNewPsdDesc('(两次密码不一致)')
        setAgNewPsd('')
        return
      }
        
      /* 
    regFn({ 
      str: newPsd,
      reg: '^.{6,18}$',
      okText: '成功',
      failText: '6到18个字',
      fnText:setNewPsdDesc
    })

    regFn({ 
      str: newAgPsd,
      reg: '^.{6,18}$',
      okText: '成功',
      failText: '6到18个字',
      fnText:setAgNewPsdDesc
    }) */
 

    // if (newPsd === newAgPsd) {
    //   console.log('等于')
    // } else { 
    //   setNewPsdDesc('两次密码不一致')
    //   setAgNewPsdDesc('两次密码不一致')
    //   return
    // }
    // setbBtnSubmitIcon(true)
  }
  const regFn = (obj) => { 
    var reg = new RegExp(obj.reg, 'ig')
    var result = reg.test(obj.str)
    reg.lastIndex=0
    if (result) {
      obj.fnText(obj.okText)
      return true
    } else { 
      obj.fnText(obj.failText)
      return false
    }
  }
  return (
    <div>
      <div className="reset-title">旧密码<span style={{color:'#f00'}}>{oldPsdDesc}</span></div>
      <input type="text" className="ipt-resetpsd" placeholder="请输入旧密码" value={oldPsd}
        onChange={(v) => {setOldPsw(v.target.value);}}  />
      <div className="reset-title">新密码<span style={{color:'#f00'}}>{newPsdDesc}</span></div>
      <input type="text" className="ipt-resetpsd" placeholder="请输入新密码" value={newPsd}
      onChange={(v) => {setNewPsd(v.target.value);}}
      />
      <div className="reset-title">确认新密码<span style={{color:'#f00'}}>{newAgPsdDesc}</span></div>
      <input type="text" className="ipt-resetpsd" placeholder="请再次输入新密码" value={newAgPsd}
      onChange={(v) => {setAgNewPsd(v.target.value);}}
      />
      <div style={{ height: '40px'}}></div>
      <div className="login-wrap">
      <button onTouchStart={() => { }} className="btn-login" onClick={handleSubmit}>
                            {bBtnSubmitIcon?<i className="alifont font16 anim-rotate360">&#xe861;</i>:null}
                            <span className="font16" >{bBtnSubmitIcon?'':btnText}</span>
                        </button>
      </div>
 
    </div>
  )
}